<template>
  <div class="login">
    <div class="login-wrap">
      <div class="login-content">
        <div class="f1">
          <!-- <div class="logo">
            <img src="@/assets/login/logo.png" alt="logo" />
          </div> -->
          <el-form label-width="80px" :model="loginForm" :inline="false" size="large">
            <div v-if="loginErrorText !== ''" class="error-info">
              <i class="el-icon-warning"></i>
              <span>{{ loginErrorText }}</span>
            </div>
            <el-form-item prop="account">
              <template #label>
                <img src="@/assets/login/u.png" alt="账号" width="30" />
              </template>
              <el-input
                v-model="loginForm.account"
                autocomplete="off"
                placeholder="用户名"
                @keyup.enter="login"
              />
            </el-form-item>
            <el-form-item prop="password">
              <template #label>
                <img src="@/assets/login/p.png" alt="密码" width="30" />
              </template>
              <el-input
                v-model="loginForm.password"
                placeholder="密码"
                type="password"
                @keyup.enter="login"
              />
            </el-form-item>
            <el-form-item class="login-btn-item" label-width="40px">
              <el-button :loading="loading" round class="login-btn" @click="login">{{
                loading ? '' : '登录'
              }}</el-button>
            </el-form-item>
            <div class="links">
              <span>忘记密码</span>
              <span>注册</span>
            </div>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs } from 'vue'
import { useRouter } from 'vue-router'

import { useUserStore } from '@/store/user'

const state: any = reactive({
  loginErrorText: '',
  loginForm: {
    account: '',
    password: '',
  },
  info: [],
  loading: false,
})

const { loginErrorText, loginForm, loading } = toRefs(state)

const checkLogin = () => {
  if (state.loginForm.account === '') {
    state.loginErrorText = '请输入用户名'
    return false
  }
  if (state.loginForm.password === '') {
    state.loginErrorText = '请输入密码'
    return false
  }
  state.loginErrorText = ''
  return true
}

const { signIn } = useUserStore()

const router = useRouter()
const login = async () => {
  const flag = checkLogin()
  if (flag) {
    state.loading = true
    try {
      const { account, password } = state.loginForm
      await signIn({
        account,
        password,
      })
      // const routes = store.state.user.asyncRoutes
      // const path = (routes.length > 0 && routes[0].path) || '/'
      // router.push({ path: path, replace: true })
    } finally {
      state.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
@keyframes huerotate {
  100% {
    filter: hue-rotate(360deg);
  }
}

.icon {
  width: 1em;
  height: 1em;
  overflow: hidden;
  vertical-align: -0.15em;
  fill: currentColor;
}

.account-bg,
.password-bg {
  width: 20px;
  height: 20px;
  background: url('../../assets/login/user.png') center no-repeat;
}

.password-bg {
  background: url('../../assets/login/password.png') center no-repeat;
}

.login {
  height: 100%;
  overflow: auto;
  background: #222b34;

  @include scroll-bar;

  &-btn {
    color: white;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 20px;

    :deep() {
      .el-loading-mask {
        background: transparent;
      }
    }
  }

  &-wrap {
    display: flex;
    min-height: 100%;
    padding: 20px 0;
    color: white;
    align-items: center;
    justify-content: center;
  }

  &-content {
    display: flex;
    width: 55.55556vh;
    height: 80vh;
    max-width: 480px;
    max-height: 854px;
    min-width: 360px;
    min-height: 640px;
    padding: 20px;
    overflow: hidden;
    background: red;
    background: url('../../assets/login/bg1.png') no-repeat;
    background-size: 100% 100%;
    border-radius: 10px;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
    flex-direction: column;
    align-items: center;

    .f1 {
      display: flex;
      flex: 1;
      flex-direction: column;
      // justify-content: center;
      align-items: center;
    }
  }

  .logo {
    width: 50%;
    margin: 40px 0;
    text-align: center;

    img {
      width: 100%;
    }
  }

  :deep() {
    .el-form {
      width: 100%;
      margin-top: 20px;
      margin-left: -40px;
    }

    .el-form-item__label {
      display: flex;
      height: 40px;
      padding-right: 0;
      justify-content: center;
      align-items: center;
    }

    svg {
      font-size: 18px;
      color: #4e4e4e;
    }

    .el-input__icon {
      font-size: 18px;
      color: #4e4e4e;
    }

    .el-input__prefix,
    .el-input__suffix {
      color: #4e4e4e;
    }

    .el-form-item__content {
      width: calc(100% - 80px);
    }

    .el-input__inner {
      width: 100%;
      // color: #ccc;
      color: #000;
      // background: #bdbdbd;
      background: transparent;
      border: none;
      border-bottom: 1px solid rgb(255 255 255 / 30%);
      border-radius: 0;

      &::placeholder {
        color: #666;
      }
    }

    .error-info {
      display: flex;
      height: 40px;
      padding: 0 8px;
      margin-bottom: 10px;
      margin-left: 80px;
      font-size: 14px;
      color: red;
      background: #fefcee;
      border: 1px solid #ff934c;
      border-radius: 6px;
      align-items: center;

      i {
        margin-right: 5px;
        font-size: 20px;
        vertical-align: middle;
      }
    }

    .login-btn {
      width: 100%;
    }
  }

  .links {
    display: flex;
    width: 100%;
    padding-bottom: 20px;
    padding-left: 40px;
    justify-content: center;
    // justify-content: space-between;
    font-size: 12px;
    color: #c4c4c4;

    & > span {
      margin-right: 10px;
      cursor: pointer;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  footer {
    // margin-top: 100px;
    height: 20px;
    font-size: 20px;
  }
}
</style>
